<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拼写自己的名字</title>
    <style>
        /* 字体声明 */
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?3vrvd6');
            src: url('fonts/icomoon.eot?3vrvd6#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?3vrvd6') format('truetype'),
                url('fonts/icomoon.woff?3vrvd6') format('woff'),
                url('fonts/icomoon.svg?3vrvd6#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        /* 阿里字体声明 */
        @font-face {
            font-family: 'iconfont';
            src: url('iconfont.eot');
            src: url('iconfont.eot?#iefix') format('embedded-opentype'),
                url('iconfont.woff2') format('woff2'),
                url('iconfont.woff') format('woff'),
                url('iconfont.ttf') format('truetype'),
                url('iconfont.svg#iconfont') format('svg');
        }

        .icon {
            width: 13em;
            height: 13em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }



        span {
            display: inline-block;
        }

        .z {
            width: 111px;
            height: 111px;
            background: url(images/abcd.jpg) -480px -559px no-repeat;
        }

        .h {
            width: 101px;
            height: 101px;
            background: url(images/abcd.jpg) -220px -143px no-repeat;
        }

        .a {
            width: 106px;
            height: 118px;
            background: url(images/abcd.jpg) no-repeat;
        }

        .n {
            width: 114px;
            height: 117px;
            background: url(images/abcd.jpg) -257px -276px no-repeat;
        }

        .g {
            width: 104px;
            height: 110px;
            background: url(images/abcd.jpg) -100px -140px no-repeat;
        }

        .t {

            font-size: 20px;
            color: red;
            font-family: 'icomoon';

        }

        .m {
            font-family: 'icomoon';

        }

        .cc {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
</head>

<body>

    <span class="z"></span>
    <span class="h"></span>
    <span class="a"></span>
    <span class="n"></span>
    <span class="g"></span>

    <span class="t"></span>
    <span class="m"></span>


    <span class="cc">&#xe631;</span>

    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-lvzhi7"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-lvzhi6"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-lvzhi7"></use>
    </svg>

</body>

<script src="./iconfont.js"></script>

</html>